<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="form" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'ROLE.ROLE_NAME' | i18n}}</nz-form-label>
          <nz-form-control>
            <input
              formControlName="roleName"
              name="roleName"
              nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('roleName'), name:'roleName'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'ROLE.OWNER_INSTITUTION' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <app-aams-select
              level="institution"
              formControlName="insCode"
              name="insCode">
            </app-aams-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('insCode'), name:'insCode'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'ROLE.ROLE_LEVEL' | i18n}}</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="roleType" name="roleType">
              <nz-option *ngFor="let userRole of userRoles"
                [nzValue]="userRole.value"
                [nzLabel]="userRole.label"
              ></nz-option>
            </nz-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('roleType'), name:'roleType'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <nz-form-label>{{'ROLE.ROLE_DESC' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <textarea formControlName="roleDesc" name="roleDesc" nz-input></textarea>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('roleDesc'), name:'roleDesc'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

    </div>
  </form>
</div>


<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
      <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
      <ng-template #second>
        <ng-container *ngIf="control.hasError('minlength'); else third">{{ errorTips[name]?.minlength }}</ng-container>
      </ng-template>
      <ng-template #third>
        <ng-container *ngIf="control.hasError('maxlength'); else fourth">{{ errorTips[name]?.maxlength }}</ng-container>
      </ng-template>
      <ng-template #fourth>
        <ng-container *ngIf="control.hasError('pattern')">{{ errorTips[name]?.pattern }}</ng-container>
      </ng-template>
  </ng-container>
</ng-template>
